<template>
  <div class="container">
    <div class="top">
      <img src="./bg.png" class="img"/>
      <!-- <div class="headtext">电厂</div> -->
      <div class="button">
        <div class="topic">
          <div class="titleText">{{placw}}</div>
          <div class="buttonText">
            <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">信息管理</el-dropdown-item>
                <el-dropdown-item command="1">退出登录</el-dropdown-item>

                <!--<el-dropdown-item>螺蛳粉</el-dropdown-item>-->
                <!--<el-dropdown-item disabled>双皮奶</el-dropdown-item>-->
                <!--<el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </div>

        <!-- <el-button type="primary" class="buttondetail" @click="mianpage()">首页</el-button>
        <el-button type="primary" class="buttondetail" @click="goTo('/tradingCenter/TradingCenter')">交易中心</el-button>
        <el-button type="primary" class="buttondetail" @click="goTo('/informationCenter')">资讯中心</el-button>
        <el-button type="primary" class="buttondetail" @click="goTo('/Test')">服务中心</el-button> -->
      </div>
    </div>
    <div class="bottoom">
      <!-- <div class="left">
      <el-button type="primary" class="buttondetail" @click="goTo('/Test')">保证金管理</el-button>

      <el-button type="primary" class="buttondetail" v-if="userInfo.status==1"  @click="goTo('/sellerGoodsManagement/SellerGoodsManagement')">牌子管理</el-button>
      <el-button type="primary" class="buttondetail" v-if="userInfo.status==0" @click="goTo('/OrderManagement')">订单管理</el-button>
      <el-button type="primary" class="buttondetail"  @click="goTo('/#')">信息管理</el-button>
      <el-button type="primary" class="buttondetail"  @click="goTo('/#')">消息通知</el-button>
    </div> -->
      <div class="left">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1" @click="mianpage('首页')">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="2" @click="goTo('/tradingCenter/TradingCenter','交易中心')">
            <i class="el-icon-refresh"></i>
            <span slot="title">交易中心</span>
          </el-menu-item>

          <el-menu-item index="3" @click="goTo('/informationCenter','资讯中心')">
            <i class="el-icon-view"></i>
            <span slot="title">资讯中心</span>
          </el-menu-item>

          <el-menu-item index="5" @click="goTo('/prestore','保证金管理')">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">保证金管理</span>
          </el-menu-item>

          <p v-if="userInfo.status==1">
            <el-menu-item index="6" @click="goTo('/sellerGoodsManagement/SellerGoodsManagement','牌子管理')">
              <i class="el-icon-date"></i>
              <span slot="title">牌子管理</span>
            </el-menu-item>
          </p>
          <p v-else>
            <el-menu-item index="7" @click="goTo('/OrderManagement','订单管理')">
              <i class="el-icon-goods"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
          </p>
          <!--<el-menu-item index="8" @click="goTo('/userInfoManage','信息管理')">-->
          <!--<i class="el-icon-message"></i>-->
          <!--<span slot="title">信息管理</span>-->
          <!--</el-menu-item>-->
          <el-menu-item index="9" @click="goTo('/messageInform','消息通知')">
            <i class="el-icon-bell"></i>
            <span slot="title">消息通知</span>
          </el-menu-item>
          <el-menu-item index="4" @click="goTo('/Test','关于我们')">
            <i class="el-icon-service"></i>
            <span slot="title">关于我们</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right">
        <router-view v-if="!show"></router-view>
        <div v-if="show">
          <div class="right-top">
            <div class="right-top-tip">通知公告</div>
            <div class="right-top-line"></div>
            <div class="right-table">
              <div class="right-table-box1">序号</div>
              <div class="right-table-box2">标题</div>
              <div class="right-table-box1">时间</div>
            </div>
            <div class="right-table-detail" v-for="(item,i) in msg" :key="i">
              <div class="right-table-detail-box1">{{i+1}}</div>
              <div class="right-table-detail-box2">{{item.b}}</div>
              <div class="right-table-detail-box1">{{item.c}}</div>
            </div>
          </div>
          <div class="right-bottom">
            <div class="right-top-tip">交易上架</div>
            <div class="right-top-line"></div>
            <div style="height: 10px "></div>
            <el-table :data="listprop" style="width: 100% " :header-cell-style="headerStyle" :cell-style="cellStyle"
                      :row-style="rowstyle">
              <el-table-column
                width="60"
                align="center"
                type="index"
                label="序号"
              >
              </el-table-column>
              <el-table-column prop="id" align="center" label="单据编号"></el-table-column>
              <el-table-column prop="createTime" align="center" label="创建日期"></el-table-column>
              <el-table-column prop="placeOrigin" align="center" label="源地"></el-table-column>
              <el-table-column prop="supplyQuantity" align="center" label="数量（万吨）"></el-table-column>
              <el-table-column prop="unitPrice" align="center" label="单价（元/吨）"></el-table-column>
              <!--<el-table-column prop="" align="center" label="结算方式"> </el-table-column>-->
              <el-table-column prop="supplierName" align="center" label="所属"></el-table-column>

              <!--<el-table-column prop="propstatus" v-if="propstatus==0" align="center" label="状态" width="180">-->

              <!--</el-table-column>-->
              <!--<el-table-column prop="address" align="center" label="操作" width="180"></el-table-column>-->
            </el-table>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Common from '@/components/common/Common'
  import ls from '../../components/common/CommonJS.js'

  export default {
    data() {
      return {
        show: true,
        placw: "首页",
        msg: [
          {
            a: 1,
            b: "国电煤炭交易系统V1.0正式发布！",
            c: "2021-10-20 20:13:34",
          },
          {
            a: 1,
            b: "国电煤炭交易系统测试启动",
            c: "2021-10-15 18:40:32",
          }
        ],
        listprop: [],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        userInfo: ls.getItem("userInfo")
      };
    },
    mounted: function () {
      // console.log("登录刷新结果：",   ls.getItem("userInfo"))
      this.loadAllPropByStatus();
    },
    methods: {
      handleCommand(command) {
        if (command == 0) {
          this.goTo('/userInfoManage', '信息管理')
        }
        else if (command == 1) {
          ls.setItem("userInfo", null);
          ls.setItem("userInfoBuy", null);
          ls.setItem("userInfoSale", null);
          ls.setItem("enterpriseInfoBuy", null);
          ls.setItem("enterpriseInfoSale", null);
          ls.setItem("status", null);
          ls.setItem("userid", null);
          this.$router.push("/");

        }

      },
      mianpage() {
        this.show = true
        this.placw = "首页"
      },
      goTo(path, name) {
        this.show = false
        this.$router.push(path)
        this.placw = name
      },
      cellStyle() {
        return {
          'font-size': '14px',

          height: '40px',
          padding: '0'
        }
      },
      headerStyle() {
        return {
          'font-size': '18px',
          "background-color": "#545c64",
          color: '#ffff',
          height: '60px',
          padding: '0'
        }
      },
      rowstyle({row, rowIndex}) {
        if (rowIndex % 2 != 0) {
          return {"background-color": '#C0C4CC'}
        } else {
          return ''
        }
      },
      loadAllPropByStatus() {
        this.axios.get(Common.API + 'prop/loadPropByStatus')
          .then(response => {
            console.log("查询成功" + Common.API, response.data.data);
            this.listprop = response.data.data;

            // (this.info = response)
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      },

    }
  };
</script>

<style>
  .container {
    overflow: auto;
    height: 100vh;

  }

  .top {
    height: 6%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #545c64;
  }

  /* .top .headtext {
    margin-top: 10px;
    text-align: center;
    font-size: 48px;
    color:#ffff;
  } */
  .top .img {
    position: absolute;
    height: 6%;
    width: 12%;
  }

  .topic {
    color: #ffff;
    margin-left: 14%;
    /*font-size: 600;*/
    font-size: 18px;
  }

  .top .button {
    /* width: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around; */
  }

  .top .button .buttondetail {
    width: 20%;
    height: 55px;
    font-size: 24px;
  }

  .bottoom {
    display: flex;
    justify-content: space-between;
    height: 94%;
  }

  .bottoom .left {
    width: 12%;
    display: flex;
    height: 100%;
    background-color: #545c64;
    flex-direction: column;
  }

  .bottoom .left .buttondetail {
    font-size: 20px;
    margin-top: 15px;
    font-weight: 600;
    margin-left: 8px;
    margin-right: 8px;
    box-shadow: 3px 5px 5px #656b79;
  }

  .bottoom .right {
    margin: 10px 10px;
    width: 88%;
  }

  .right-top {
    height: 53%;
    display: flex;
    flex-direction: column;
  }

  .right-bottom {
    height: 360px;
    overflow-y: hidden;
    /*overflow-y: scroll;*/
    display: flex;
    flex-direction: column;
  }

  .right-top-tip {
    width: 150px;
    background-color: #545c64;
    height: 40px;
    margin-top: 10px;
    color: #ffff;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    float: left;
  }

  .right-top-line {
    width: 100%;
    height: 3px;
    background-color: #545c64;
  }

  .right-table {
    display: flex;
    justify-content: space-around;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px dashed #e4e7ed;
  }

  .right-table-detail {
    display: flex;
    justify-content: space-around;
    border-bottom: 2px dashed #e4e7ed;
    font-size: 18px;
  }

  .right-table-box1 {
    width: 20%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background-color: rgb(200, 213, 255);
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .right-table-box2 {
    width: 60%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(200, 213, 255);
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .right-table-box3 {
    width: 20%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(200, 213, 255);
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .right-table-detail-box1 {
    width: 20%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .right-table-detail-box2 {
    width: 60%;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .right-table-detail-box3 {
    width: 20%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .titleText {
    float: left;
  }

  .buttonText {
    float: right;
    margin-right: 10%;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: white;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
